<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 指定字符编码为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 网页标题为"新增员工" -->
    <title>新增员工</title>
    <style>
        /* 页面整体样式 */
        body {
            font-family: 'Arial', sans-serif; /* 使用Arial字体 */
            background-color: #f7f7f7; /* 背景颜色 */
            margin: 0; /* 外边距 */
            padding: 20px; /* 内边距 */
        }
        /* 表单样式 */
        form {
            background-color: #ffffff; /* 表单背景颜色 */
            padding: 30px; /* 内边距 */
            border-radius: 8px; /* 边框圆角 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            max-width: 500px; /* 最大宽度 */
            margin: 50px auto; /* 自动居中 */
        }
        /* 字段集样式，用于分组表单元素 */
        fieldset {
            border: none; /* 无边框 */
            margin: 0; /* 外边距 */
            padding: 0; /* 内边距 */
        }
        /* 表单标题样式 */
        legend {
            font-size: 1.5em; /* 字体大小 */
            color: #333; /* 字体颜色 */
            margin-bottom: 10px; /* 下边距 */
            padding: 0 5px; /* 左右内边距 */
        }
        /* 标签样式 */
        label {
            display: block; /* 块级显示 */
            margin-bottom: 5px; /* 下边距 */
            color: #666; /* 字体颜色 */
        }
        /* 输入框和选择框样式 */
        input[type="text"],
        input[type="number"],
        input[type="date"],
        select {
            width: 100%; /* 宽度 */
            padding: 10px; /* 内边距 */
            margin-bottom: 20px; /* 下边距 */
            border: 1px solid #ddd; /* 边框 */
            border-radius: 4px; /* 边框圆角 */
            box-sizing: border-box; /* 边框计算方式 */
        }
        /* 提交按钮样式 */
        input[type="submit"] {
            background-color: #5cb85c; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 边框圆角 */
            cursor: pointer; /* 鼠标悬停时显示手形图标 */
            transition: background-color 0.3s ease; /* 颜色变化的过渡效果 */
        }
        /* 提交按钮悬停效果 */
        input[type="submit"]:hover {
            background-color: #4cae4c; /* 悬停时的背景颜色 */
        }
    </style>
</head>
<body>
<!-- 表单用于收集用户输入的员工信息，并提交到服务器 -->
<form action="/EAS" method="post">
    <fieldset>
        <legend>新增员工信息</legend>

        <!-- 员工姓名输入框 -->
        <label for="empName">员工姓名：</label>
        <input type="text" id="empName" name="empName" required><br>

        <!-- 员工工资输入框，要求输入数字，且不能小于0 -->
        <label for="salary">员工工资：</label>
        <input type="number" id="salary" name="salary" required min="0"><br>

        <!-- 入职时间选择器，要求选择日期 -->
        <label for="hireDate">入职时间：</label>
        <input type="date" id="hireDate" name="hireDate" required><br>

        <!-- 部门编号下拉选择框，要求选择一个部门 -->
        <label for="deptId">部门编号：</label>
        <select id="deptId" name="deptId" required>
            <option value="">请选择部门</option>
            <option value="1">技术部</option>
            <option value="2">市场部</option>
            <option value="3">人事部</option>
            <!-- 其他部门选项可以在这里继续添加 -->
        </select><br>

        <!-- 提交按钮，用户点击后将表单数据提交到服务器 -->
        <input type="submit" value="提交">
    </fieldset>
</form>
</body>
</html>